<template>
  <div class="container">
    <div class="left-container">
      <div class="statistics-container">
        <div class="statistics">
          <div class="manage">
            <span>今日受理:
              <span class="manage-color">{{ done.data.todoToday }}</span>
            </span>
            <span>今日办结:
              <span class="manage-color">{{ done.data.todoToday }}</span>
            </span>
            <span>办结率:
              <span class="manage-color">{{ done.data.doneRateToday }}</span>
            </span>
            <span>累计受理:
              <span class="manage-color">{{ done.data.todoTotal }}</span>
            </span>
            <span>累计办结:
              <span class="manage-color">{{ done.data.doneTotal }}</span>
            </span>
            <span>办结率:
              <span class="manage-color">{{ done.data.doneRateTotal }}</span>
            </span>
          </div>
          <p>2019年度统计大厅办件量</p>
          <div class="unit">单位（万件）</div>
        </div>
        <div class="chart">
          <e-charts
            :option="option"
          />
        </div>
      </div>
      <!-- 热门事项 -->
      <div class="module">
        <div class="top5">
          <div
            v-for="(item, i) in top5.data"
            :key="i"
            class="item"
          >
            <div class="icon">
              <!-- <svg-icon :icon-class="`${ location.origin }/icons/奖牌.svg`" /> -->
              <img src="/icon/排名.svg" alt="">
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="bar-container">
              <div
                class="bar"
                :style="{
                  width: `${(item.count / top1) * 100}%`,
                  backgroundColor: `${top5colors[i]}`
                }"
              >
                {{ item.count }}
              </div>
            </div>
          </div>
        </div>
        <e-charts
          class="hot-chart"
          :option="hotOption"
        />
      </div>
    </div>
    <div class="middle-container">
      <div>
        <e-charts
          :option="option2"
          class="pie"
        />
      </div>
      <div>
        <e-charts
          :option="option3"
          class="pie"
        />
      </div>
    </div>
    <div class="right-container">
        <div>
          <e-charts
            ref="bizChart"
            :option="option1"
            class="pie"
          />
        </div>
      <div>
        <e-charts
          :option="departmentOption"
          class="pie"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  name: 'HomePage',
  data() {
    return {
      top5colors: [
        '#eb2d26',
        '#ec4e29',
        '#ec6e24',
        '#e98c1f',
        '#e6aa2e'
      ],
    }
  },
  created() {
    this.updateGetDepartmentStatisticsList()
  },
  computed: {
    ...mapState('echarts' ,[
      'echartsList'
    ]),
    ...mapState('datavis', [
      'done',
      'department',
      'top5',
      'hot',
      'biz'
    ]),
    ...mapGetters('datavis', [
      'top1'
    ]),
    option() {
      return {
        color: ['#e86e27'],
        grid: {
          // left: '10%',
          top: '8',
          right: '10',
          bottom: '20'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#31598d'
            }
          },
          data: this.done.data.history.map(d => d.month)
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
        },
        series: [
          {
            data: this.done.data.history.map(d => d.total),
            type: 'line',
            smooth: true
          }
        ]
      };
    },
    option1() {
      return {
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [40, 130],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              color: '#fff',
              alignTo: 'edge',
              formatter: '{b}: {d}%\n',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15
            },
            labelLine: {
              length: 30,
              length2: 30,
              maxSurfaceAngle: 80,
              lineStyle: {
                color: '#31598d'
              }
            },
            labelLayout: (params) => {
              const isLeft = params.labelRect.x < this.$refs.bizChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: this.biz.data,
          },
        ]
      };
    },
    hotOption() {
      return {
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#64aafe' // 0% 处的颜色
          }, {
            offset: 1, color: '#1f52fd' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
        grid: {
          top: '10',
          // bottom: '60',
          right: '10'
        },
        tooltip: {},
        xAxis: {
          axisLine: {
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 10
            },
            rotate: 45
          },
          axisTick: {
            show: false
          },
          data: this.hot.data.map(d => d.name)
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31598d'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#31598d'
            }
          }
        },
        series: [{
          name: 'aaa',
          type: 'bar',
          data: this.hot.data.map(d => d.count)
        }]
      }
    },
    departmentOption() {
      return {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0, color: '#316eff' // 0% 处的颜色
            }, {
                offset: 1, color: '#64abfe' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          },
        },
        yAxis: {
          type: 'category',
          data: this.department.data.map(d => d.project),
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: this.department.data.map(d => d.count),
            barWidth: '20',

          },
        ]
      }
    },
    option2() {
      return {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#1b5495' // 0% 处的颜色
            }, {
                offset: 1, color: '#141a58' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        ],
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#fff'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1c276a'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1c276a'
            }
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {},
            symbol: "none",
            lineStyle: {
              color: "#71b1e5"
            }
          }
        ]
      }
    },
    option3() {
      return {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0, color: '#016dfa' // 0% 处的颜色
            }, {
                offset: 1, color: '#954ee6' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          show: false
        },
        yAxis: {
          type: 'category',
          data: this.department.data.map(d => d.project),
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            }
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: this.department.data.map(d => d.count),
            barWidth: '20',

          },
        ]
      }
    },
  },
  methods: {
    ...mapActions('echarts' ,[
      'updateGetDepartmentStatisticsList'
    ]),
  }
}
</script>

<style lang="scss" scoped>
// section {
//   width: 100%;
//   height: 100%;
//   display: grid;
//   grid-template-columns: repeat(2, 50%);
//   grid-template-rows: repeat(2, 50%);

//   div {
//     background-color: skyblue;
//   }
// }
$a: #003372;
$b: white;
.container {
  width: 100%;
  height: calc(100vh - 80px);
  background-color: $a;
  overflow: auto;
  display: grid;
  // 定义每一列的列宽
  grid-template-columns: repeat(3, 33.33%);
  // 定义每一行的行高
  // grid-template-rows: repeat(2, 50%);
  // 设置行间距
  // grid-row-gap: 4px;
  // 设置列间距
  // grid-column-gap: 4px;

  .left-container {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    box-sizing: border-box;

    .statistics-container {
      // box-sizing: border-box;
      // overflow: hidden;
      display: flex;
      flex-direction: column;
      // display: grid;
      // grid-template-rows: repeat(2, 50%);

      .statistics {
        // display: grid;
        // grid-template-columns: repeat(3, 33.33%);
        // grid-template-rows: repeat(2, 50%);
        // background-color: skyblue;
        color: $b;
        font-size: 14px;

        .manage {
          display: grid;
          grid-template-columns: repeat(3, 33.33%);

          .manage-color {
            color: orange;
          }
        }

        p {
          text-align: center;
        }

        .unit {
          text-align: right;
        }
      }
    }

    .chart {
      width: 100%;
      height: 100%;
    }

    .module {
    display: flex;
    flex-direction: column;

      .hot-chart {
        flex: 1;
      }

      .top5 {
        flex: 1;

        .item {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 8px 0;

          .icon {

            img {
              display: block;
              width: 16px;
              height: 16px;
            }
          }

          .name {
            width: 150px;
          }

          .bar-container {
            flex: 1;
            background: #aab;

            .bar {
              float: right;
              text-align: right;
              padding-right: 4px;
              box-sizing: border-box;
            }
          }
        }
      }
    }

  }

  .middle-container {
    display: grid;
    grid-template-rows: repeat(2, 50%);
  }

  .right-container {
    display: grid;
    grid-template-rows: repeat(2, 50%);

    .pie {
      width: 100%;
      height: 100%;
    }
  }

}

</style>
